<script lang="ts" setup>
  import type { SelectProps } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestGetCompanyAllIdentityList } from '/@/api/business/identity'
  import { requestGetUserIdentityList } from '/@/api/business/identity/userIdentity'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'
  const router = useRouter()
  const statusOptions = ref<SelectProps['options']>([
    { label: '待审批', value: 0 },
    { label: '已通过', value: 1 },
    { label: '审核失败', value: 2 },
    { label: '已吊销', value: 3 },
    { label: '解绑', value: 4 },
  ])
  const columns = [
    { title: '申请人ID', dataIndex: 'userId', key: 'userId' },
    {
      title: '申请状态',
      key: 'userIdentityStatus',
      customRender: ({ record }) => {
        const resule = statusOptions.value.find((item) => {
          return record.userIdentityStatus === item.value
        })
        return resule.label
      },
    },
    { title: '身份', dataIndex: 'identityName' },
    { title: '申请时间', dataIndex: 'createTime', customRender: ({ record }) => formatToDateTime(parseInt(record.createTime)) },
    { title: '操作', key: 'action' },
  ]
  const searchParam = reactive({
    userId: '',
    identityId: '',
    userIdentityStatus: null,
  })

  const identityOptions = ref([])
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetUserIdentityListTypes.IRequest, GetUserIdentityListTypes.IResponse[]>(searchParam, requestGetUserIdentityList)
  const getUserIdentityList = async () => {
    const { responseCode, responseData } = await requestGetCompanyAllIdentityList({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      identityOptions.value = responseData.map((item) => {
        return {
          label: item.identityName,
          value: item.id,
        }
      })
    }
  }
  onMounted(() => {
    getUserIdentityList()
    queryList()
  })
  const reset = () => {
    searchParam.userId = ''
    searchParam.userIdentityStatus = null
    searchParam.identityId = ''
    queryList({ current: 1 })
  }
  const check = (record) => {
    router.push({
      path: '/idManage/check/details',
      query: { id: record.companyId },
    })
  }
</script>

<template>
  <div class="identity-list">
    <div class="fliter-wrap">
      <div>
        <div class="filter-item">
          <span class="filter-name">申请人ID：</span>
          <a-input v-model:value="searchParam.userId" allowClear style="width: 200px" placeholder="身份名称" />
        </div>
        <div class="filter-item">
          <span class="filter-name">状态：</span>
          <a-select v-model:value="searchParam.userIdentityStatus" allowClear :options="statusOptions" style="width: 200px" placeholder="状态" />
        </div>
        <div class="filter-item">
          <span class="filter-name">身份列表：</span>
          <a-select v-model:value="searchParam.identityId" allowClear :options="identityOptions" style="width: 200px" placeholder="身份列表" />
        </div>
      </div>
      <div>
        <a-button class="filter-action" @click="reset">重置</a-button>
        <a-button class="filter-action" type="primary" @click="queryList({ current: 1 })">查询</a-button>
      </div>
    </div>

    <div class="identity-list-content">
      <div class="content-name">身份审核</div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="check(record)"> 查看详情 </a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .identity-list {
    .fliter-wrap {
      border-radius: 2px;
      background: #fff;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px;

      .filter-item {
        display: inline-block;

        &:not(:nth-last-of-type(1)) {
          margin-right: 44px;
        }

        .filter-name {
          color: #000;
        }
      }

      .filter-action {
        &:not(:nth-last-of-type(1)) {
          margin-right: 8px;
        }
      }
    }

    .identity-list-content {
      border-radius: 2px;
      background: #fff;
      padding: 20px 24px;

      .content-name {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-bottom: 20px;
      }
    }
  }
</style>
./details.vue
